<template>
    <div>
        <el-card shadow="never"
                class="aui-card--fill">
            <el-table :data="tableData"
                    ref="tableData"
                    border
                    :cell-style="listCellStyle"
                    :row-class-name="tableRowClassName"
                    @cell-mouse-enter="cellMouseEnter"
                    @cell-mouse-leave="cellMouseLeave"
                    :span-method="objectJBXXMethod">
                <el-table-column prop="nameidcard"
                                label="姓名"
                                min-width="120"
                                align="center">
                    <template slot-scope='scope'>
                        {{scope.row.nameidcard}}
                    </template>
                </el-table-column>
                <el-table-column prop="types"
                                label="类型"
                                min-width="180"
                                align="center">
                    <template slot-scope='scope'>
                        {{scope.row.types}}
                    </template>
                </el-table-column>
                <el-table-column prop="zhanghao"
                                label="账号"
                                min-width="60"
                                align="center"></el-table-column>
                <el-table-column label="操作"
                                width='150px'
                                align='center'>
                    <template slot-scope="scope">
                        <el-link size='mini'
                                type='primary'
                                :underline='false'
                                @click="viewInfo(scope)">详情</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <div>
            
        </div>
    </div>
</template>
 
<script>
export default {
    data () {
        return {
            active_row_list: [], // 当前高亮
            tableData: [
                {
                    nameidcard: '赵四(515151199909090910)',
                    types: 'QQ',
                    zhanghao: '123456'
                },
                {
                    nameidcard: '赵四(515151199909090909)',
                    types: 'QQ',
                    zhanghao: 'weixin_xiaowei'
                },
                {
                    nameidcard: '赵四(515151199909090908)',
                    types: '身份证',
                    zhanghao: '515151199909090909'
                },
                {
                    nameidcard: '赵四(515151199909090907)',
                    types: '钉钉',
                    zhanghao: '18080808080'
                },
                {
                    nameidcard: '赵四(515151199909090907)',
                    types: '钉钉',
                    zhanghao: '18080808080'
                },
                {
                    nameidcard: '赵四(515151199909090907)',
                    types: '钉钉',
                    zhanghao: '18080808080'
                },
                {
                    nameidcard: '赵四(515151199909090904)',
                    types: '钉钉4',
                    zhanghao: '18080808080'
                },
                {
                    nameidcard: '张三(3333333333333)',
                    types: 'QQ',
                    zhanghao: '123456'
                },

            ]
        }
    },

    methods: {
        getTableData () {
            let spanOneArr = [],
                spanTwoArr = [],
                concatOne = 0,
                concatTwo = 0
            this.tableData.forEach((item, index) => {
                if (index === 0) {
                    spanOneArr.push(1)
                    spanTwoArr.push(1)
                } else {
                    if (item.nameidcard === this.tableData[index - 1].nameidcard) { //第一列需合并相同内容的判断条件
                        spanOneArr[concatOne] += 1
                        spanOneArr.push(0)
                    } else {
                        spanOneArr.push(1)
                        concatOne = index
                    }

                    // if (item.types === this.tableData[index - 1].types) { //第二列和第16列需合并相同内容的判断条件
                    //     spanTwoArr[concatTwo] += 1
                    //     spanTwoArr.push(0)
                    // } else {
                    //     spanTwoArr.push(1)
                    //     concatTwo = index
                    // }
                }
            })
           
                // two: spanTwoArr
            return {
                one: spanOneArr
            }
        },
        objectJBXXMethod ({
            row,
            column,
            rowIndex,
            columnIndex
        }) {
            if (columnIndex === 0) {
                const _row = (this.getTableData(this.tableData).one)[rowIndex]
                const _col = _row > 0 ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
            // if (columnIndex === 1) {
            //     const _row = (this.getTableData(this.tableData).two)[rowIndex]
            //     const _col = _row > 0 ? 1 : 0
            //     return {
            //         rowspan: _row,
            //         colspan: _col
            //     }
            // }
        },
        cellMouseEnter (row) {
            this.active_row_list = this.tableData.filter(item => item.nameidcard === row.nameidcard);
        },
        cellMouseLeave () {
            this.active_row_list = []
        },
        listCellStyle({ row, column, rowIndex, columnIndex }) {
            if (columnIndex < 1) {
                return {
                    backgroundColor: "transparent",
                }
            }
        },
    },
    computed: {
        tableRowClassName ({ row }) {
            return this.active_row_list.some(item => item.nameidcard === row.nameidcard) ? 'sucess_row' : '';
        },
    },
    mounted () {

    }
}
</script>
<style lang="scss" scoped>
.el-table {
    >>> .sucess_row {
        background: rgba(220, 240, 254, 1) !important;
    }
    >>> .el-table__row:hover {
        td {
            background: rgba(220, 240, 254, 1) !important;
        }
    }
}
</style>